<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @close="closeDiolog" width="80%">
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-card shadow="never" style="margin-top:1rem;">
              <el-row style="margin-top:2rem;">
                <el-col :span="5">姓名：{{data.name}}</el-col>
                <el-col :span="5">性别：{{data.gender}}</el-col>
                <el-col :span="5">年龄：{{data.age}}</el-col>
                <el-col :span="5">工作年限：{{data.workingYears}}</el-col>
                <el-col :span="4">状态：{{data.status}}</el-col>
              </el-row>
              <el-row style="margin-top:2rem;">
                <el-col :span="5">应聘职位：{{data.appliedPosition}}</el-col>
                <el-col :span="5">职位地区：{{data.positionArea}}</el-col>
                <el-col :span="5">应聘时间：{{data.applicationTime}}</el-col>
                <el-col :span="9">
                  最近面试时间：
                  <el-date-picker v-model="data.interviewTime" :readonly="true" type="datetime" placeholder="">
                  </el-date-picker>
                </el-col>
              </el-row>
              <el-row style="margin-top:2rem;margin-bottom:1rem;">
                <el-col :span="5">最低薪资要求：{{data.minimumWageRequirement}}</el-col>
                <el-col :span="5">最高薪资要求：{{data.maximumWageRequirement}}</el-col>
              </el-row>
            </el-card>
            <el-card shadow="never" style="margin-top:1rem;">
              <el-row style="margin-top:2rem;">
                <el-col :span="5">出生日期：{{data.birthday}}</el-col>
                <el-col :span="5">所在城市：{{data.city}}</el-col>
                <el-col :span="10">手机号：{{data.phoneNumber}}</el-col>
              </el-row>
              <el-row style="margin-top:2rem;margin-bottom:1rem;">
                <el-col :span="10">电子邮件：{{data.email}}</el-col>
                <el-col :span="10">最近工作公司：{{data.recentWorkCompany}}</el-col>
              </el-row>
            </el-card>
            <el-card shadow="never" style="margin-top:1rem;margin-bottom:1rem;">
              <el-row style="margin-top:2rem;margin-bottom:2rem;">
                <el-col :span="5">毕业学校：{{data.graduateSchool}}</el-col>
                <el-col :span="5">学校类型：{{data.typesOfSchools}}</el-col>
                <el-col :span="5">毕业时间：{{data.graduationTime}}</el-col>
                <el-col :span="5">学历：{{data.education}}</el-col>
              </el-row>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="教育经历" name="second">
            <el-card>
              <p v-html="detail.contEducation"></p>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="工作经历" name="third">
            <el-card>
              <p v-html="detail.contJobExp"></p>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="项目经验" name="fourth">
            <el-card>
              <p v-html="detail.contProjExp"></p>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="自我描述" name="fifth">
            <el-card>
              <p v-html="detail.contMyDesc"></p>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="附加信息" name="sixth">
            <el-card>
              <p v-html="detail.contExtraInfo"></p>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        activeName: 'first',
        data: {},
        detail: {},
        options: [{
          value: 0,
          label: '未处理'
        }, {
          value: 1,
          label: '不符合要求',
        }, {
          value: 2,
          label: '已转发'
        }, {
          value: 3,
          label: '已通知'
        }, {
          value: 4,
          label: '已笔试'
        }, {
          value: 5,
          label: '一面通过'
        }, {
          value: 6,
          label: '一面未通过',
        }, {
          value: 7,
          label: '二面通过'
        }, {
          value: 8,
          label: '二面未通过'
        }, {
          value: 9,
          label: '已录用'
        }, {
          value: 10,
          label: '已过期'
        }, {
          value: 11,
          label: '待定'
        }]
      }
    },
    methods: {
      init(data) {
        this.dialogVisible = true
        data.status = this.formatStatus(data.status)
        this.data = data
        //获取其他详细信息
        this.clearDetail()
        this.$http({
          url: `${this.$http.adornUrl('/resumeDetail/?token='+this.$cookie.get('token') )}`,
          method: 'get',
          params: this.$http.adornParams({
            resumeId: this.data.resumeId
          })
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            console.log(data)
            console.log(this)
            this.detail = data['detail']
            console.log(this.detail)
            this.handleDetailData(this.detail)
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'warning'
            });
          }
        })
      },
      formatStatus(val) {
        if (val == 0) {
          return '未处理'
        } else if (val == 1) {
          return '不符合要求'
        } else if (val == 2) {
          return '已转发'
        } else if (val == 3) {
          return '已通知'
        } else if (val == 4) {
          return '已笔试'
        } else if (val == 5) {
          return '一面通过'
        } else if (val == 6) {
          return '一面未通过'
        } else if (val == 7) {
          return '二面通过'
        } else if (val == 8) {
          return '二面未通过'
        } else if (val == 9) {
          return '已录用'
        } else if (val == 10) {
          return '已过期'
        }else if (val == 11) {
          return '待定'
        }
      },
      handleClick() {
        console.log(222)

      },
      closeDiolog() {
        this.activeName = "first"
      },
      handleDetailData(data) {
        data.contEducation = data.contEducation.replace(/\n/g, "</br>")
        data.contJobExp = data.contJobExp.replace(/\n/g, "</br>")
        data.contProjExp = data.contProjExp.replace(/\n/g, "</br>")
        data.contMyDesc = data.contMyDesc.replace(/\n/g, "</br>")
        data.contExtraInfo = data.contExtraInfo.replace(/\n/g, "</br>")
        return data
      },
      clearDetail() {
        this.detail.contEducation = ""
        this.detail.contJobExp = ""
        this.detail.contProjExp = ""
        this.detail.contMyDesc = ""
        this.detail.contExtraInfo = ""
      }
    }
  }

</script>
